<%@ page import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='zhyyglhtxt' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        .province-list li:hover, #select span:hover {
            color: #009688;
            cursor: pointer;
        }

    </style>
</head>

<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px;">

    <div class="layui-form-item" style="border: 1px solid #EEEEEE;">
        <label for="" class="layui-form-label" style="width: 80px;"><fmt:message key='yxdq' />：</label>
        <div class="layui-input-block select" id="select" style="line-height: 38px;"></div>
    </div>

    <div class="select-box" style="overflow: hidden; height: 550px">
        <div class="provice-box" style="float: left; width: 20%; height: 100%; overflow-y: scroll">
            <ul class="province-list">
                <c:forEach varStatus="status" var="item" items="${provinces}">
                    <li style="line-height: 30px;">
                        <input type="checkbox" lay-skin="primary" lay-filter="province" id="p-${item.provinceCode}" data-province="${item.provinceCode}" class="province-select-all"
                            <c:set var="checked" value="true"/>
                        <c:forEach var="i" items="${item.merchantFreightCities}">
                        <c:if test="${!fn:contains(note, i.name)}">
                            <c:set var="checked" value="false"/>
                        </c:if>
                        </c:forEach>
                               <c:if test="${checked}">checked</c:if>>
                        <span class="province-item" style="display: inline-block;" data-province="${item.provinceCode}">${item.name}</span></li>
                </c:forEach>
            </ul>
        </div>

        <div class="city-box" style="float: left; width: 76%; padding: 10px 0 10px 20px;">
            <c:forEach var="item" items="${provinces}">
                <ul class="city-list" id="${item.provinceCode}" data-province-id="${item.provinceCode}" style="display: none;">
                    <c:forEach var="i" items="${item.merchantFreightCities}">
                        <li style="margin: 6px 0; display: inline-block;" data-city="${i.name}">
                            <input data-province-id="${item.provinceCode}" type="checkbox" lay-filter="city"
                                   <c:if test="${fn:contains(note, i.name)}">checked</c:if> title="${i.name}">
                        </li>
                    </c:forEach>
                </ul>
            </c:forEach>
        </div>
    </div>
</div>


<script>

    var storage = window.localStorage;

    var note = storage["note"];
    storage.removeItem("note");

    var citys = note ? note.split("-") : [];
    var citysHtml = [];
    $.each(citys, function (index, item) {
        citysHtml.push("<span>" + item + "</span>");
    });
    $("#select").html(citysHtml.join("、"));

    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;

        $("#select").on("click", "span", function () {
            var name = $(this).text();
            $(".city-box li input").each(function (index, item) {
                if (item.title == name) {
                    item.checked = false;
                    citys.splice(citys.indexOf(name), 1);
                    $("#p-" + item.getAttribute("data-province-id")).prop("checked", false);
                    updateNote();
                    return;
                }
            });
        });

        /**
         * 点击省显示相应的市
         */
        $(".province-item").click(function () {
            var provinceCode = this.getAttribute("data-province");
            console.log(provinceCode);
            $("#" + provinceCode).show().siblings().hide();
        });

        form.on('checkbox(city)', function (data) {
            var value = data.elem.getAttribute("title");
            if (data.elem.checked) {
                citys.push(value);
                var checked = true;
                $(data.elem).parent().parent().find("input[type=checkbox]").each(function (index, item) {
                    if (!item.checked) {
                        checked = false;
                        return;
                    }
                });
                if (checked) {
                    $("#p-" + data.elem.getAttribute("data-province-id")).prop("checked", true);
                }
            } else {
                citys.splice(citys.indexOf(value), 1);
                $("#p-" + data.elem.getAttribute("data-province-id")).prop("checked", false);
            }
            updateNote();
        });

        form.on('checkbox(province)', function (data) {
            var provinceCode = data.elem.getAttribute("data-province");
            if (data.elem.checked) {
                $("#" + provinceCode).children("li").each(function (index, item) {
                    var city = item.getAttribute("data-city");
                    if (citys.indexOf(city) === -1) {
                        citys.push(city);
                    }
                    $(item).children("input").eq(0).prop("checked", true);
                });
            } else {
                $("#" + provinceCode).children("li").each(function (index, item) {
                    var city = item.getAttribute("data-city");
                    var i = citys.indexOf(city);
                    if (i > -1) {
                        citys.splice(i, 1);
                    }
                    $(item).children("input").eq(0).prop("checked", false);
                });
            }
            updateNote();
        });


        function updateNote() {
            form.render();
            var citysHtml = [];
            $.each(citys, function (index, item) {
                citysHtml.push("<span title='<fmt:message key='djsc' />'>" + item + "</span>");
            });
            $("#select").html(citysHtml.join("、"));
        }
    });

</script>
</body>
</fmt:bundle>
</html>